<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模拟用户登录系统</title>
		<link rel="stylesheet" href="css/bootstrap.min.css"/>
		<!-- 引入第三方样式之外,还可以自己定义样式, 覆盖样式表样式 -->
		<style>
			/*限制网页宽度,不能直接设置body,设置container*/
			.container{
				width: 300px;
			}
		</style>
		
		
		<!-- 导入外部js文件 -->
		<script src="js/jquery.min.js"></script>
		
	</head>
	<body>
		<div class="container">
			<h3>用户登录</h3>
			
			<!-- 展示区域:登陆成功信息 先默认隐藏起来-->
			<div style="display: none;" id="msg" >123</div>
			
			<div class="form-group">
				<label>用户名:</label>
				<input type="text" class="form-control" autocomplete="off" placeholder="请输入用户名..." name="username" id="username" />
			</div>
			<div class="form-group">
				<label>密码:</label>
				<input type="password" class="form-control" placeholder="请输入密码..." name="password" id="password" />
			</div>
			<div>
				<!-- 给按钮绑定onclick单击事件,写函数名() -->
				<button id="btnSubmit" class="btn btn-success" onclick="doSubmit()">登录</button>
				<button id="btnClear" class="btn btn-danger" onclick="doClear()">清空</button>
			</div>
		</div>
	</body>	
		
	<script>
		//定义提交函数
		// function jsdoSubmit(){
		// 	//获取用户名框内的内容
		// 	var username = document.getElementById("username");
		// 	// console.log(username);
		// 	console.log(username.value);//input框获取属性值方式.value
			
		// 	//获取密码
		// 	var password = document.getElementById("password");
		// 	console.log(password.value);
			
		// 	//获取msg框,设置新值,把它展示出来,设置新颜色
		// 	var msg = document.getElementById("msg");
		// 	//div与input获取值得语法不同
		// 	msg.innerText = username.value + "登陆成功";//div获取属性值方式.innerText
		// 	//动态改变框样式-设置style属性,展示msg(重设样式会覆盖之前的样式) margin-外边距 padding-内边距
		// 	msg.style = "display:block; color:white; background-color: #008000; margin: 10px; padding: 10px;";
		// }
		
		<!-- jQuery实现登录按钮 -->
		function doSubmit(){
			var username = $("#username");
			var msg = $("#msg");
			
			//替代.innerText使用text()方法;替代.value使用val()方法
			msg.text( username.val()+"登陆成功" );//修改div的内容
			
			//jQuery专门支持css设置,方法-key,value
			msg.css("display","block");//显示div
			msg.css("color","white");//设置字体颜色为白色
			msg.css("background-color","green");//设置背景色为绿色
			msg.css("margin","10px");//设置外边距为10px
			msg.css("padding","10px");//设置内边距为10px
		}
		
		//清空输入框
		// function jsdoClear(){
		// 	document.getElementById("username").value = '';//赋空字符串清空值
		// 	document.getElementById("password").value = "";//单引号和双引号功能相同
		// }
		
		//jQuery语法来实现
		function doClear(){
			//置空  
			//选择器selector(标签直接写名字,class属性用. id属性用#)
			//函数,规范:val();
			$("#username").val('');
			$("#password").val('');
		}
	</script>
</html>
